<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <welcome>
            <template slot="s1" slot-scope='up'>
          <p>我是位于子组件{{up.position}}位置的p标签</p>
      </template>
            <template slot="s2" slot-scope='down'>
          <p>我是位于子组件{{down.position}}位置的p标签</p>
      </template>

        </welcome>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        Vue.component('welcome', {
            template: `
        <div style="width:500px;height:300px;border:1px solid red;">
          <slot name="s1" position='top'></slot>
          <h1>欢迎光临</h1>
          <slot name="s2" position='bottom'></slot>
        </div>
      `,
            data: function() {
                return {}
            },
            methods: {}
        })
        var vm = new Vue({
                el: '#app'
            })
            /**
            将XX的值, 变为子组件中slot所传递的数据
            **/
    </script>
</body>

</html>